<template>
  <div>
<!--    添加供应商-->
    <el-dialog title="供应商信息" :visible.sync="dialogFormVisible" style="width: 1200px">
      <el-form :model="form">
        <el-form-item label="供应商名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" style="width: 300px"  placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" style="width: 300px" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="药物类型" :label-width="formLabelWidth">
          <el-input v-model="form.type" autocomplete="off" style="width: 300px" placeholder="请输入药品类型"></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-input v-model="form.principal" autocomplete="off" style="width: 300px" placeholder="请输入负责人名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input maxlength="11" show-word-limit v-model="form.phone" autocomplete="off" style="width: 250px;" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>



<!--    //信息表格-->
  <div style="margin-top: 10px">
    <el-button type="primary" style="margin-bottom: 20px;background: #2cc8b7" @click="add" icon="el-icon-plus" >添加供应商</el-button>
    <el-input maxlength="5" show-word-limit v-model="input" placeholder="请输入供应商编号" style="width: 200px;margin-left: 630px"></el-input>
    <el-input maxlength="20" show-word-limit v-model="input1" placeholder="请输入供应商名称" style="width: 200px;margin-left: 0px"></el-input>
    <el-button icon="el-icon-search" circle style="margin-left: 5px" @click="find"></el-button>
    <el-button icon="el-icon-refresh-right" circle style="margin-left: 5px" @click="shuaxin"></el-button>

  </div>
  <div>
  <el-table
    :data="tableData"
    style="width: 100%"
    border
  >
    <el-table-column
      label="供应商编号"
      width="180"
      align="center"
    >
      <template slot-scope="scope">
        <i class="el-icon-star-off"></i>
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="供应商名称"
      width="180"
      align="center">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column
      label="供应商地址"
      width="180" align="center">
      <template slot-scope="scope">
        <i class="el-icon-office-building"></i>
        <span style="margin-left: 10px">{{ scope.row.address }}</span>
      </template>
    </el-table-column><el-table-column
    label="药物类型"
    width="180" align="center">
    <template slot-scope="scope">
      <i class="el-icon-collection-tag"></i>
      <span style="margin-left: 10px">{{ scope.row.type }}</span>
    </template>
  </el-table-column><el-table-column
    label="负责人"
    width="180" align="center">
    <template slot-scope="scope">
      <i class="el-icon-user"></i>
      <span style="margin-left: 10px">{{ scope.row.principal }}</span>
    </template>
  </el-table-column><el-table-column
    label="联系电话"
    width="180" align="center">
    <template slot-scope="scope">
      <i class="el-icon-phone-outline"></i>
      <span style="margin-left: 10px">{{ scope.row.phone }}</span>
    </template>
  </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
      :current-page="currentPage"
      :total="total"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      background
      layout="prev, pager, next, sizes, total, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

    <el-dialog title="供应商信息" :visible.sync="dialogFormVisible1":close-on-click-modal="false" :close-on-press-escape="false":show-close="false" style="height: 800px;flex: auto" >
      <div>
        <div style="float: left">
          <el-form :model="form1">
            <el-form-item label="供应商名字" :label-width="formLabelWidth">
              <el-input v-model="form1.name" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right">
          <el-form :model="form1">
            <el-form-item label="供应商地址" :label-width="formLabelWidth">
              <el-input v-model="form1.address" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div>
        <div style="float: left">
          <el-form :model="form1">
            <el-form-item label="药物类型" :label-width="formLabelWidth">
              <el-input v-model="form1.type" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right">
          <el-form :model="form1">
            <el-form-item label="负责人" :label-width="formLabelWidth">
              <el-input v-model="form1.principal" autocomplete="off" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>


      <div style="float: left">
        <div>
          <el-form :model="form1">
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <el-input maxlength="11" show-word-limit v-model="form1.phone" autocomplete="off" style="width: 350px;" ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div>
        <div style="padding-left: 500px">
          <el-button @click="cancels">取 消</el-button>
          <el-button type="primary" @click="updates">保 存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {provider,insertprovider,deleteprovider,updateprovider,medicinedelete} from "../../api";

  export default {
    inject:['reload'],
    data() {
      return {
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dataList:[],
        currentPage: 1, //当前页
        pageSize: 5, //每页行数
        total: 0,
        x:'',
        form: {
          id: '',
          name: '云南白药集团',
          address: '北京',
          type: '中药',
          principal:'李月',
          phone:'19892072935'
        },
        form1:{
          name:'',
          address:'',
          type:'',
          principal:'',
          phone:''
        },
        formLabelWidth: '100px',
        input:'',
        input1:'',
        tableData: []
      }
    },

    methods: {
      handleEdit(index, row) {
       this.dialogFormVisible1=true
        this.form1=this.tableData[index]
        this.x=this.tableData[index].id
      },
      cancels()
      {
        this.dialogFormVisible1=false;
        this.reload()
      },
      updates()
      {
        if(this.form1.name!=''&&this.form1.address!=''
          &&this.form1.type!=''&&this.form1.principal!=''
          &&this.form1.phone!=''){
          updateprovider( {name: this.form1.name,
            address: this.form1.address,
            type: this.form1.type,
            principal: this.form1.principal,
            phone: this.form1.phone,id:this.x}).then((res=>{
            if(res.data.code==200)
            {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.dialogFormVisible1=false
            }else{
              this.$message.error("修改异常")
            }
          }))
        }else{
          this.$message.error("你有信息未填写")
        }
      },
      handleDelete(index, row) {
        this.$confirm('删除该供应商,对应的药物信息也将删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          medicinedelete({pid:this.tableData[index].id}).then((res=>{
            deleteprovider({id: this.tableData[index].id})
              .then((res => {
                if (res.data.code == 200) {
                  this.$message({
                    type: 'success',
                    message: '删除成功'
                  });
                  this.reload()
                }
              }))
             }))
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      add()
      {
        this.dialogFormVisible=true
      },
      ok()
      {
        if(this.form.name!=''&&this.form.address!=''
          &&this.form.type!=''&&this.form.principal!=''
      &&this.form.phone!='') {
          insertprovider({
            name: this.form.name,
            address: this.form.address,
            type: this.form.type,
            principal: this.form.principal,
            phone: this.form.phone,
          }).then((res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功")
              this.dialogFormVisible=false
              this.reload();
            } else {
              this.$message.error("插入失败")
            }
          }))
        }else{this.$message.error("信息未填完整")}
      },
      providers()
      {
        provider({id:'null'}).then((res=>{
          this.tableData=res.data.data
          this.dataList = res.data.data;
          this.total = res.data.data.length;
          this.handleCurrentChange(1);
        }))
      },
      find()
      {
        provider({id:this.input,name:this.input1}).then((res=>{
          this.tableData=res.data.data
        }))
      },
      shuaxin()
      {
        this.reload();
      },


      handleSizeChange: function (pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
        this.handleCurrentChange(1);
      },
      //页码切换
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.dataList, currentPage);
      },
      //分页方法
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tableData = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tableData.push(list[from]);
          }
        }
        console.log(this.tableData);
      }
    },
    created() {
      this.providers()
    }
  }
</script>
